<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');?>
<script type="text/javascript" src="<?php echo STATIC_DOMAIN;?>js/highcharts/js/highcharts.src.js"></script>
<script type="text/javascript" src="<?php echo STATIC_DOMAIN;?>js/highcharts/js/modules/exporting.src.js"></script>
<script type="text/javascript" src="<?php echo STATIC_DOMAIN;?>js/highcharts/js/themes/grid.js"></script>
<div class="middle padtop10 myclear">
	<div class="page-content">
		<h3>
			<a style="color: #ff6600;" href="<?php echo site_url('zone/dashboard'); ?>">
				Dashboard
			</a>
			>>
			<a style="color: #ff6600;" href="<?php echo site_url('zone/view_type'); ?>">
				Danh sách zone đang chạy
			</a>
			>>
			<span>
				View zone report
			</span>
		</h3>
		
		<hr class="martop10 marbottom10 myclear" />
		
		<p class="padtop10">
			<input type="text" readonly="readonly" id="date" class="input-time" value="<?php echo $fromDate . ' đến ' . $toDate; ?>" />
		</p>
		
		<p class="padtop10 font14">
			<b>Bạn đang xem các zones:</b>
		</p>
		<?php
		foreach($lstZone as $zone)
		{
		?>
			<p class="padtop10 padleft20 font14">
				- <?php echo $zone['zonename']; ?>
			</p>
		<?php
		}
		?>
		
		<p class="padtop10 padbottom10 font14 bold">
			Click Report
		</p>
		<div id="Zone_Click_Chart" class="chart"></div>
				
		<p class="padtop10 padbottom10 font14 bold">
			Impressions Report
		</p>
		<div id="Zone_Imp_Chart" class="chart"></div>
		
		<div class="myclear padtop20">
			<p class="padbottom10 font14 bold">
				Dữ liệu theo ngày
			</p>
			
			<table class="tbl-list" width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td class="td-label bold" width="100">
						Ngày
					</td>
					<td class="td-label bold">
						Zone name
					</td>
					<td class="td-label bold text-right" width="120">
						Click
					</td>
					<td class="td-label bold text-right" width="150">
						Impression
					</td>
					<td class="td-label bold text-right" width="80">
						CTR (%)
					</td>
				</tr>
				<?php
				$rowIndex = 0;
				foreach($lstData as $key=>$val)
				{
					$index = 0;
					foreach($lstZone as $zItem)
					//foreach($val as $item)
					{
						$bg = ($index%2==0) ? '' : 'style="background-color: #f5f5f5;"';
						$dateBg = ($rowIndex%2 == 0) ? '' : 'style="background-color: #f1f1f1;"';
						if(isset($val[$zItem['zoneid']]))
						{
							if($index == 0)
							{
							?>
								<tr >
									<td <?php echo $dateBg; ?> class="ver-middle text-center bold" rowspan="<?php echo $numZone; ?>">
										<p class="padtop5 padbottom5">
											<?php echo date('d-m-Y', strtotime($key)); ?>
										</p>
									</td>
									<td <?php echo ($numZone > 1) ? $bg : $dateBg; ?>>
										<p class="padtop5 padbottom5">
											<?php echo $zItem['zonename']; ?>
										</p>
									</td>
									<td <?php echo ($numZone > 1) ? $bg : $dateBg; ?> class="text-right">
										<p class="padtop5 padbottom5">
											<?php echo number_format($val[$zItem['zoneid']]['rc']); ?>
										</p>
									</td>
									<td <?php echo ($numZone > 1) ? $bg : $dateBg; ?> class="text-right">
										<p class="padtop5 padbottom5">
											<?php echo number_format($val[$zItem['zoneid']]['v']); ?>
										</p>
									</td>
									<td <?php echo ($numZone > 1) ? $bg : $dateBg; ?> class="text-right">
										<p class="padtop5 padbottom5">
											<?php echo $val[$zItem['zoneid']]['ctr']; ?>
										</p>
									</td>
								</tr>
							<?php
							}
							else
							{
							?>
								<tr >
									<td <?php echo ($numZone > 1) ? $bg : $dateBg; ?>>
										<p class="padtop5 padbottom5">
										<?php echo $zItem['zonename']; ?>
										</p>
									</td>
									<td <?php echo ($numZone > 1) ? $bg : $dateBg; ?> class="text-right">
										<p class="padtop5 padbottom5">
											<?php echo number_format($val[$zItem['zoneid']]['rc']); ?>
										</p>
									</td>
									<td <?php echo ($numZone > 1) ? $bg : $dateBg; ?> class="text-right">
										<p class="padtop5 padbottom5">
											<?php echo number_format($val[$zItem['zoneid']]['v']); ?>
										</p>
									</td>
									<td <?php echo ($numZone > 1) ? $bg : $dateBg; ?> class="text-right">
										<p class="padtop5 padbottom5">
											<?php echo $val[$zItem['zoneid']]['ctr']; ?>
										</p>
									</td>
								</tr>
							<?php
							}
						}
						else
						{
							if($index == 0)
							{
							?>
								<tr >
									<td <?php echo $dateBg; ?> class="ver-middle text-center bold" rowspan="<?php echo $numZone; ?>">
										<p class="padtop5 padbottom5">
											<?php echo date('d-m-Y', strtotime($key)); ?>
										</p>
									</td>
									<td <?php echo ($numZone > 1) ? $bg : $dateBg; ?>>
										<p class="padtop5 padbottom5">
											<?php echo $zItem['zonename']; ?>
										</p>
									</td>
									<td <?php echo ($numZone > 1) ? $bg : $dateBg; ?> class="text-right">
										<p class="padtop5 padbottom5">
											N/A
										</p>
									</td>
									<td <?php echo ($numZone > 1) ? $bg : $dateBg; ?> class="text-right">
										<p class="padtop5 padbottom5">
											N/A
										</p>
									</td>
									<td <?php echo ($numZone > 1) ? $bg : $dateBg; ?> class="text-right">
										<p class="padtop5 padbottom5">
											N/A
										</p>
									</td>
								</tr>
							<?php
							}
							else
							{
							?>
								<tr >
									<td <?php echo ($numZone > 1) ? $bg : $dateBg; ?>>
										<p class="padtop5 padbottom5">
											<?php echo $zItem['zonename']; ?>
										</p>
									</td>
									<td <?php echo ($numZone > 1) ? $bg : $dateBg; ?> class="text-right">
										<p class="padtop5 padbottom5">
											N/A
										</p>
									</td>
									<td <?php echo ($numZone > 1) ? $bg : $dateBg; ?> class="text-right">
										<p class="padtop5 padbottom5">
											N/A
										</p>
									</td>
									<td <?php echo ($numZone > 1) ? $bg : $dateBg; ?> class="text-right">
										<p class="padtop5 padbottom5">
											N/A
										</p>
									</td>
								</tr>
							<?php
							}
						}
						$index++;
					}
					$rowIndex++;
				}
				?>
			</table>
		</div>
		
		<br /><br />
	</div>
</div>

<script type="text/javascript">
	$(document).ready(function() {
		$('#date').DatePicker({
	        format: 'd-m-Y',
	        date: ['<?php echo $fromDate;?>','<?php echo $toDate;?>'],
	        current: '<?php echo date('d-m-Y');?>',
	        calendars: 2,
	        mode: 'range',
	        starts: 1,
	        locate:'week',
	        onChange: function(formated, dates) 
	        {
	            $('#date').val(formated.join(' đến '));
	            $('#date').DatePickerHide();
	            var zid = '<?php echo $strZoneId; ?>';
	            var arrTime = formated.toString().split(',');
	            var fromdate = arrTime[0];
	            var todate = arrTime[1];
	            var strURL="<?php echo site_url('zone/report');?>?&zid=" + zid + "&from=" + fromdate+"&to="+todate;
	            window.location = strURL;
	        }
	    });
  	});
	Highcharts.theme = {
	   colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
	   chart: {
		  backgroundColor: {
			 linearGradient: [0, 0, 500, 500],
			 stops: [
				[0, 'rgb(239, 239, 239)']
			 ]
		  },
		  plotBackgroundColor: 'rgba(255, 255, 255, .9)',
		  plotBorderWidth: 1,
		  spacingRight: 30
	   },
	   title: {
		  style: { 
			 color: '#000',
			 font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
		  }
	   },
	   subtitle: {
		  style: { 
			 color: '#666666',
			 font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
		  }
	   },
	   xAxis: {
		  
		  labels: {					 
			 style: {
				color: '#000',
				font: '11px Trebuchet MS, Verdana, sans-serif'
			 }
		  },
		  tickColor: '#333',
		  title: {
			 style: {
				color: '#333',
				fontWeight: 'bold',
				fontSize: '12px',
				fontFamily: 'Trebuchet MS, Verdana, sans-serif'
	
			 }            
		  }
	   },
	   yAxis: {
		  //minorTickInterval: 'auto',
		  lineColor: '#aaa',
		  lineWidth: 1,
		  tickWidth: 1,
		  tickColor: '#999',
		  labels: {
			 style: {
				color: '#000',
				font: '11px Trebuchet MS, Verdana, sans-serif'
			 }
		  },
		  title: {
			 style: {
				color: '#333',
				fontWeight: 'bold',
				fontSize: '12px',
				fontFamily: 'Trebuchet MS, Verdana, sans-serif'
			 }            
		  }
		   
	   },
	   legend: {
		  itemStyle: {         
			 font: '9pt Trebuchet MS, Verdana, sans-serif',
			 color: 'black'
	
		  },
		  itemHoverStyle: {
			 color: '#039'
		  },
		  itemHiddenStyle: {
			 color: 'gray'
		  }
	   },
	   labels: {
		  style: {
			 color: '#99b'
		  }
	   }
	};
	var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
	var chart;
	var chart2;
	$(document).ready(function() {
		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'Zone_Click_Chart',
				defaultSeriesType: 'areaspline',
                marginBottom: 60,
				zoomType: 'x'
			},
			title: {
				text: 'Click',
				style: {
						font: 'normal 18px arial, sans-serif',
						color:'#0a708c'
				}
			},
			 xAxis: {
				categories: <?php echo json_encode($arrDate);?>,
				maxZoom: 5,
                labels: {
                  //  step:  <?php  echo isset($chartStep) ? $chartStep : 1;?>,
					rotation: 0,
					align: 'center'
                },
				tickPixelInterval:0,
				tickmarkPlacement: 'on',
				tickInterval: <?php  echo isset($chartStep) ? $chartStep : 1;?>,
				lineColor: '#333',
				lineWidth: 1
				
			},
			yAxis: {
				title: {
					text: 'Số lượng',
					style: {
						font: 'bold 14px vernada, sans-serif',
						color:'#0a708c'
					}
				}
			},
			tooltip: {
				formatter: function() {
						var a=function addCommas(nStr)
							{
								nStr += '';
								x = nStr.split('.');
								x1 = x[0];
								x2 = x.length > 1 ? '.' + x[1] : '';
								var rgx = /(\d+)(\d{3})/;
								while (rgx.test(x1)) {
									x1 = x1.replace(rgx, '$1' + ',' + '$2');
								}
								return x1 + x2;
							}
		                return ''+ this.x +': <b>'+ a(this.y) +'</b>';
				},
				style: {
					font: 'normal 12px vernada, sans-serif',
					color:'#000000'
				},
				
                crosshairs: true
			},
			credits: {
				enabled: false
			},
			plotOptions: {
				areaspline: {
					fillOpacity: 0.2,
					lineWidth: 2,
					states: {
					   hover: {
						  lineWidth: 3
					   }
					},
					marker: {
					   enabled: true,
					   states: {
						  hover: {
							 enabled: true,
							 symbol: 'circle',
							 radius: 4,
							 lineWidth: 1
						  },
						  radius: 4
					   }   
					}
				 }
				
				
			},
			rangeSelector: {
				selected: 1,
				inputEnabled: false
			},
			
			navigator: {
				height: 30
			},
            legend: {
				align: 'center',
				verticalAlign: 'bottom',
				y: 8,
				x:10,
				floating: false,
				borderWidth: 1,
				///backgroundColor: '#FFFFFF',
				backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF'
				
			},
			series: [<?php for($i =0; $i < count($clickData); $i++){echo $clickData[$i]; echo ($i <($numZone-1))? ',':'';}?>],
            exporting: {
                enabled: false
            }
			
		});
		
		chart2 = new Highcharts.Chart({
			chart: {
				renderTo: 'Zone_Imp_Chart',
				defaultSeriesType: 'areaspline',
                marginBottom: 60,
				zoomType: 'x'
			},
			title: {
				text: 'Impressions',
				style: {
						font: 'normal 18px arial, sans-serif',
						color:'#0a708c'
				}
			},
			 xAxis: {
				categories: <?php echo json_encode($arrDate);?>,
				maxZoom: 5,
                labels: {
                  //  step:  <?php  echo isset($chartStep) ? $chartStep : 1;?>,
					rotation: 0,
					align: 'center'
                },
				tickPixelInterval:0,
				tickmarkPlacement: 'on',
				tickInterval: <?php  echo isset($chartStep) ? $chartStep : 1;?>,
				lineColor: '#333',
				lineWidth: 1
				
			},
			yAxis: {
				title: {
					text: 'Số lượng',
					style: {
						font: 'bold 14px vernada, sans-serif',
						color:'#0a708c'
					}
				}
			},
			tooltip: {
				formatter: function() {
						var a=function addCommas(nStr)
							{
								nStr += '';
								x = nStr.split('.');
								x1 = x[0];
								x2 = x.length > 1 ? '.' + x[1] : '';
								var rgx = /(\d+)(\d{3})/;
								while (rgx.test(x1)) {
									x1 = x1.replace(rgx, '$1' + ',' + '$2');
								}
								return x1 + x2;
							}
		                return ''+ this.x +': <b>'+ a(this.y) +'</b>';
				},
				style: {
					font: 'normal 12px vernada, sans-serif',
					color:'#000000'
				},
				
                crosshairs: true
			},
			credits: {
				enabled: false
			},
			plotOptions: {
				areaspline: {
					fillOpacity: 0.2,
					lineWidth: 2,
					states: {
					   hover: {
						  lineWidth: 3
					   }
					},
					marker: {
					   enabled: true,
					   states: {
						  hover: {
							 enabled: true,
							 symbol: 'circle',
							 radius: 4,
							 lineWidth: 1
						  },
						  radius: 4
					   }   
					}
				 }
				
				
			},
			rangeSelector: {
				selected: 1,
				inputEnabled: false
			},
			
			navigator: {
				height: 30
			},
            legend: {
				align: 'center',
				verticalAlign: 'bottom',
				y: 8,
				x:10,
				floating: false,
				borderWidth: 1,
				///backgroundColor: '#FFFFFF',
				backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF'
				
			},
			series: [<?php for($i =0; $i < count($impData); $i++){echo $impData[$i]; echo ($i <($numZone-1))? ',':'';}?>],
            exporting: {
                enabled: false
            }
			
		});
	});
</script>